<%@page language="java" isELIgnored="false" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions'%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div style="float: right; margin: 5px 5px 0px 0px;">
		<form method="post" action="farm?action=search&item=animal&kraalid=${kraal.id }" style="display: inline-block;">
		By Tag No:
			<input type="text" class="uiTextbox" id="txtSearch" size="30" name="query" value="${query }" /> <input
				type="submit" class="uiButton" id="btnSearchSubmit" value="Search" />
		</form>
</div>
<div style="clear: both;">
Farm Name: ${kraal.farm.name } >> Kraal Name: <a href="farm?action=view&item=farm&id=${kraal.farm.id}">${kraal.name}</a> >>
</div>
<div id="farmButtonStrip" class="buttonStrip">
	<div style="float:left;">
		<input type="hidden" id="kraalid" value="${kraal.id }" />
		<input type="hidden" id="qanimalpage" value="1" />
		<a id="btnAddAnimal" class="uiButton" href="farm?action=add&item=animal&kraalid=${kraal.id}">Add</a>
		<a id="btnDeleteAnimal" class="uiButton" href="farm?action=delete&item=animal&kraalid=${kraal.id}">Delete</a>
	</div>
	<div style="float:right;">
		<%@ include file="/WEB-INF/views/navigation.jsp" %>
	</div>
	<div style="clear:both"></div>	
</div>

<div id="farmRecords" style="min-height: 400px;">
		<c:if test="${not empty kraal }">
			<input type="hidden" name="hdnFarmId" id="hdnFarmId" value="${kraal.id }"/>
		</c:if>
			<table class="recordTable" width="100%" cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th><input type="checkbox" id="cbxSelectAllItems" /></th>
						<th>Picture</th>
						<th>Name</th>
						<th>Ear Tag</th>
						<th>Weight</th>
						<th>Breed</th>
						<th>Date of Birth</th>
						<th>Health Status</th>
						<th>Status</th>
						<th>Purchase Date</th>
					</tr>
				</thead>
				
				<tbody>	<c:choose>
						<c:when test="${not empty animals  && fn:length(animals) > 0}">
							<c:forEach var="animal" items="${animals}">
							
										<tr id="${animal.id }" url="farm?action=view&item=animal&animalid=${animal.id}">
											<td><input name="selectedAnimal" type="checkbox" id="${animal.id }" value="${animal.id }" />
											</td>
											<td>
												<div style="width: 60px; height: 60px; border: 1px solid #DDD; "><img alt="Animal picture" src="farm?action=view&item=pic&animalid=${animal.id }&kraalid=${kraal.id}" id="animalPicture" name="animalPicture" height="50px;" width="50px;" /></div>
												
											</td>
											<td>${animal.name }</td>
											<td>${animal.earTag }</td>
											<td>${animal.weight }</td>
											<td>${animal.breed.name }</td>
											<td><fmt:formatDate value="${animal.dateOfBirth }" pattern="dd/MM/yyyy"/>
											</td>
										    <td>${animal.healthStatus.name }</td>
										    <td>${animal.status.name }</td>	
										    <td><fmt:formatDate value="${animal.purchaseDate }" pattern="dd/MM/yyyy"/>
										    </td>	
										</tr>
								
							</c:forEach>
						</c:when>
						</c:choose>
				</tbody>
			</table>
</div>